<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货架管理</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<style>
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
<body>
<div id="app">
    <span>按条件查询</span>
    <el-input
            placeholder="请输入货架编号"
            prefix-icon="el-icon-search"
            style="width: 300px"
            v-model="shelvesNum">
    </el-input>
    <el-date-picker
            v-model="time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
    </el-date-picker>
    <el-button type="success" @click="page">搜索</el-button>
    <el-button type="success" @click="addTshelves()">添加货架</el-button>
    <el-tree
            :data="trees"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick">
    </el-tree>
    <el-table
            ref="multipleSelection"
            :data="pageContext.records"
            tooltip-effect="dark"
            style="width:80%"
            :default-sort="{prop: 'id', order: 'shelvesNum'}">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="序号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="货架编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.shelvesNo}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="仓库编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.wareId}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="货区编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.dameId}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="主要商品">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mainProduct}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="货位数量">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.totalNum}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="创建时间"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.creatTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="180">
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="statusMe(scope.row)">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column
                label="描述"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.remark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogFormVisible" :title="updateTshevle">
        <el-form :model="Tshelves">
            <el-form-item label="货区编号">
                <el-input v-model="Tshelves.shelvesNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属仓库">
                <el-select v-model="Tshelves.wareId" @change="findTRs">
                    <el-option
                            v-for="m in menu"
                            :key="m.id"
                            :label="m.wareName"
                            :value="m.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属货区">
                <el-select v-model="Tshelves.dameId" placeholder="请选择货区">
                    <el-option
                            v-for="tr in TReservoirs"
                            :label="tr.goodsName"
                            :key="tr.id"
                            :value="tr.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="主要商品">
                <el-input v-model="Tshelves.mainProduct" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货架数量">
                <el-input v-model="Tshelves.totalNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="Tshelves.creatTime" type="datetime" readonly="readonly"></el-date-picker>
                </br>
                <el-date-picker v-model="Tshelves.creatTime" value-format="timestamp" type="datetime"
                                placeholder="更改创建时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <span>请设置货位状态 打开货位是1,关闭货位是0</span>
                <el-input v-model="Tshelves.status" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="Tshelves.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sure">确 定</el-button>
        </div>
    </el-dialog>

    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6,5,4,3,2,1]"
                :page-size="row"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageContext.total">
        </el-pagination>

    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            trees: null,
            pageContext: [],
            total: 0,
            current: 1,
            row: 5,
            menu: [],
            shelvesNum: null,
            Tshelves: {},
            updateTshevle: "",
            TReservoirs: "",
            time: null,
            dialogFormVisible: false,
            defaultProps: {
                children: 'treservoirs',
                label: 'wareName'
            }
        },
        methods: {
            page: function () {
                axios.get("/tshelvesdy?current=" + this.current + "&&row=" + this.row + "&&shelvesNum=" + this.shelvesNum + "&&time=" + this.time).then(res => {
                    res.data.records.forEach(tr => {
                        if (tr.status == 1) {
                            tr.status = true
                        } else {
                            tr.status = false
                        }
                    })
                    this.pageContext = res.data
                })
            },

            select: function () {
                axios.get("/findOneWh").then(res => {
                    this.menu = res.data
                })
            },
            treeMethods: function () {
                axios.get("/findMenuDy").then(res => {
                    this.trees = res.data;
                    this.trees.forEach(tree => {
                        tree.treservoirs.forEach(tr => {
                            tr['wareName'] = tr.goodsName;
                        })
                    })
                });
            },
            handleNodeClick(r, two) {
                if (two.level == 2) {
                    r.tshelves.forEach(res=>{
                        if (res.status == 1) {
                            res.status = true
                        } else {
                            res.status = false
                        }
                    })
                    this.pageContext.records = r.tshelves
                }


            },
            statusMe(row) {
                axios.get("/tReservoirDy/" + row.dameId).then(res => {
                    if (res.data.status == "1") {
                        if (row.status) {
                            row.status = 1
                        } else {
                            row.status = 0
                        }
                        axios.get("/tshelvesDy/" + row.id + "/" + row.status).then(res => {
                            if (res.data == "ok") {
                                alert("更新成功！！！")
                                this.page()
                            }
                        })
                    } else {
                        alert("货区是关闭的,不可以修改！！！")
                        row.status = 0;
                    }
                })

            },
            addTshelves() {
                this.updateTshevle = "添加货架"
                this.Tshelves = {}
                this.dialogFormVisible = true
            },
            handleEdit(index, row) {
                this.Tshelves = JSON.parse(JSON.stringify(row))
                if (this.Tshelves.status) {
                    this.Tshelves.status = 1
                } else {
                    this.Tshelves.status = 0
                }
                this.dialogFormVisible = true
                this.updateTshevle = "修改货架"
            },
            handleDelete(index, row) {
                if (confirm("确认删除")) {
                    axios.delete("/tshelvesDy/" + row.id).then(res => {
                        if (res.data == "ok") {
                            alert("删除成功！！！")
                            this.page()
                        }
                    })
                }
            },
            handleSizeChange(val) {
                this.current = 1
                this.row = val
                this.page()
            },
            handleCurrentChange(val) {
                this.current = val
                this.page()
            },
            cancel() {
                this.dialogFormVisible = false
            },
            sure() {
                if (this.Tshelves.id != null) {
                    axios.put("/tshelvesDy", this.Tshelves).then(res => {
                        if (res.data == "ok") {
                            alert("修改成功！！！")
                            this.dialogFormVisible = false
                            this.page();
                        }
                    })
                } else {
                    axios.post("/tshelvesDy", this.Tshelves).then(res => {
                        if (res.data == "ok") {
                            alert("添加成功！！！")
                            this.dialogFormVisible = false
                            this.page();
                        }
                    })
                }
            },
            findTRs(id) {
                axios.get("/reservoir/" + id).then(res => {
                    this.TReservoirs = res.data
                })
            },
        },
        mounted() {
            this.treeMethods()
            this.page()
            this.select();
        }
    })
</script>
</body>
</html>